.resourceUseStatus{
    position: relative;
}
.meetingRoomDaily{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .lefts, .rights{
        width: 50%;
        position: relative;
        height: 50%;
        .info{
            width: 100%;
            position: absolute;
            bottom: 4vh;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.5vw;
            text-align: center;

        }
    }
    .title{
        color: #49BFF8;
        line-height: 3vh;
        text-align: center;
    }
    .bottom{
        border-top: 1px solid #272A2E;
        width: 100%;
        position: absolute;
        top: 14vh;
        .item{
            background-image: url(../img/box2.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: space-between;
            height: 3vh;
            width: 90%;
            margin: 2vh auto;
            &>div{
                width: 50%;
                font-size: 0.6vw;
                line-height: 1.5vw;
                padding-left: 0.5vw;
                color: rgba(255, 255, 255, 0.8)
            }
        }
    }
}
.useItem{
    width: 80%;
    // height: 100%;
    margin: 1vh auto;
    padding-top: .5vh;
    .item{
        display: flex;
        // margin-top: 1vh;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.8);
        font-size: .5vw;
        margin-top: 3vh;
        .name{
            width: 20%;

        }
        .line{
            width: 65%;
            position: relative;
            border-radius: 5px;
            background-color: #225566;
            .line1{
                position: absolute;
                left: 0;
                top: 0;
                width: 65%;
                height: 100%;
                border-radius: 5px;
                background-color: #23F9EC;
            }
        }
        .precent{
            width: 15%;
            text-align: right;
            
        }
    }
}
.changeClassDaily{
    &>.title{
        color: #49BFF8;
        line-height: 3vh;
        text-align: center;
    }
    &>div{
        .title{
            color: #fff;
            font-size: 0.5vw;
        }
    }

    .title{
        padding: 0.6vh;
    }
    
    .content.whole{
        display: flex;
        background-image: url(../img/box2.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        justify-content: space-around;
        padding: 1vh;
        &>div{
            display: flex;  
        }
        .icon{
            width: 1.5vw;
            height: 1.5vw;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        p{
            color: #fff;
            font-size: 0.5vw;
            text-align: center;
            margin-top: 0.1vh;
        }
        .peopleNumber{
            
            .icon{
                background-image: url(../img/homeNumber.png);
            }
        }
        .motherNumber{
            .icon{
                background-image: url(../img/motherNumber.png);
            }
        }
        .homePercent{
            .icon{
                background-image: url(../img/homePercent.png);
            }
        }
    }
    .content.noon ,.content.night{
        display: flex;
        background-image: url(../img/box2.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 1vh;
        .circel{
            font-size: 0.4vw;
        }
        &>div{
            width: 33.3%;
            text-align: center;
            .circel{
                width: 2vw;
                height: 2vw;
                text-align: center;
                line-height: 2vw;
                margin: 0 auto; 
                background-size: 100% 100%;
                background-repeat: no-repeat;
                font-size: 0.8vw;
            }
            .word{
                color: #fff;
                font-size: 0.5px;
                padding-top: 1vh;
            }
            
        }
        .peopleNumber{
            .circel{
                background-image: url(../img/green.png);
                color: #23F9EC;
            }
        }
        .manNumber{
            .circel{
                background-image: url(../img/blue.png);
                color: #30BCFF;
            }
        }
        .womanNumber{
            .circel{
                background-image: url(../img/red.png);
                color: #F9696A;
            }
        }

    }
}
.consumeDaily{
    position: relative;
}